<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0px;padding: 0px;
        }
        input{size: 50px;margin-left: 20px}
    </style>
</head>
<body>
<!--失败-->
    <div id="div1">my name is andy!</div>

    <div id="div2">what's your name?</div>
    <button id="btn1">concat</button><span></span><input type="text" id="text1" value=""> <br/>
    <button id="btn2">slice(3)</button><span></span> <input type="text" id="text2" value=""><br/>
    <button id="btn3">slice(3,6)</button><span></span><input type="text" id="text3" value=""> <br/>
    <button id="btn4">slice(-1)</button><span></span> <input type="text" id="text4" value=""><br/>


    <button id="btn5">substr(3)</button><span></span><input type="text" id="text5" value=""> <br/>
    <button id="btn6">substr(3，6)</button><span></span><input type="text" id="text6" value=""> <br/>
    <button id="btn7">substr(-1) 兼容</button><span></span><input type="text" id="text7" value=""> <br/>
    区别
    <button id="btn8">slice(6,3)</button><span></span> <input type="text" id="text8" value=""><br/>
    <button id="btn9">substring(6,3)</button><span></span><input type="text" id="text9" value=""> <br/>
    <script type="text/javascript">

        var buttons = document.getElementsByTagName("button");
        var text = document.getElementsByTagName("input");
        var div1 = document.getElementById("div1").innerHTML;
        var div2 = document.getElementById("div2").innerHTML;
        // console.log(text)

        var results = [div1.concat(div2),div1.slice(3),div1.slice(3,6),div1.slice(-1),div1.substr(3),
            div1.substr(3,6),div1.substr(div1.length-1,1),div1.slice(6,3),div1.substring(6,3)]
        // console.log(results[1])
        for(var i=0;i<buttons.length;i++){
            var b = i;
            buttons[i].onclick = function () {
                // console.log(results)
                console.log(results[b])
                text[i].innerHTML = results[i];
            }
        }



    </script>

</body>
</html>